<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header class="header">
        <div class="header-img">
          <img src="../assets/images/top_03.gif" alt="">
        </div>
        <div class="logins">
        <div class="title_do"><span style="font-weight: bold;">北京科技经营管理学院</span></div>
        <div class="to">
        <el-dropdown>
          <span class="el-icon-user-solid">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>账号信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click="deleteclear">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
      </el-header>
      <el-container>
        <!-- 侧边导航 -->
        <el-aside class="aside" width="90px">
           
          <!-- <div class="a" v-for="(item,k) in list" :Key="item.id" @click="getnav(k,item.path)">
            <div v-if="item.path" class="d" style="width: 100%; height: 100%;">
              <div class="b" :class="[item.icon]"></div>
              <div class="c">{{item.name}}</div>
            </div>
            <div>
              <el-popover placement="right" :width="100" trigger="hover">
                <template #reference>
                    <button class="icon el-icon-setting" style="background-color: #fff;"></button>
                </template>
                 
                <div >
                
                   <div style="color:#333; padding: 5px;">教师管理</div>
                </div>
                <router-link :to="`/classroom`">
                <div style="color:#333; padding: 5px;">教室管理</div>
                </router-link>
                
                <router-link :to="`/account`">
                <div style="color:#333; padding: 5px;">账号管理</div>
              </router-link>

                <router-link :to="`/coures`">
                <div style="color:#333; padding: 5px;">课程管理</div>
                </router-link>
              </el-popover>
              <div class="nav-text">其他设置</div>
            </div>
          </div> -->

         
          <div class="nav">
            <router-link :to="`/index`">
              <div class="icon el-icon-s-cooperation"></div>
              <div class="nav-text">首页</div>
            </router-link>
          </div>

          <div class="nav">
            <router-link :to="`/trate`">
              <div class="icon el-icon-s-cooperation"></div>
              <div class="nav-text">班级管理</div>
            </router-link>
          </div>

          <div class="nav">
            <router-link :to="`/attence`">
              <div class="icon el-icon-check"></div>
              <div class="nav-text">考勤管理</div>
            </router-link>
          </div>
          <div class="nav">
            <router-link :to="`/classperiod`">
              <div class="icon el-icon-time"></div>
              <div class="nav-text">课时汇总</div>
            </router-link>
          </div>
          <div class="nav">
            <router-link :to="`/xuename`">
              <div class="icon el-icon-user-solid"></div>
              <div class="nav-text">学员管理</div>
            </router-link>
          </div>
          <div class="nav">    
            <el-popover placement="right" :width="100" trigger="hover">
              <template #reference>
                  <button class="icon el-icon-school" style="background-color: #fff;"></button>
              </template>
               
              <router-link :to="`dynamic`">
              <div style="color:#333; padding: 5px;">动态管理</div>
              </router-link>

              <router-link :to="`/carouselfigure`">
              <div style="color:#333; padding: 5px;">轮播图</div>
              </router-link>
              
              <router-link :to="`/account`">
              <div style="color:#333; padding: 5px;">学校介绍</div>
            </router-link>

              <router-link :to="`/contact`">
              <div style="color:#333; padding: 5px;">联系方式</div>
              </router-link>

              <router-link :to="`/campus`">
                <div style="color:#333; padding: 5px;">校区管理</div>
                </router-link>
            </el-popover>
            <div class="nav-text">学校动态</div>
        </div>
          <div class="nav">    
              <el-popover placement="right" :width="100" trigger="hover">
                <template #reference>
                    <button class="icon el-icon-setting" style="background-color: #fff;"></button>
                </template>
                 
                <router-link class="router-link" :to="`/teacher`">
                <div style="color:#333; padding: 5px;">教师管理</div>
                </router-link>

                <router-link :to="`/classroom`">
                <div style="color:#333; padding: 5px;">教室管理</div>
                </router-link>
                
                <router-link :to="`/account`">
                <div style="color:#333; padding: 5px;">账号管理</div>
              </router-link>

                <router-link :to="`/coures`">
                <div style="color:#333; padding: 5px;">课程管理</div>
                </router-link>
              </el-popover>
              <div class="nav-text">其他设置</div>
          </div>
        </el-aside>
        <!-- 内容区域-列表 -->
        <el-main class="el-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  // clear
  export default {
    data() {
      return {
         list:[
           {
             name:'首页',
             path:'/index',
             id:'1',
             icon:'el-icon-s-home'
           },
           {
             name:'班级管理',
             path:'/trate',
             id:2,
             icon:'el-icon-s-cooperation'
           },
           {
             name:'考勤管理',
             path:'/attence',
             id:4,
             icon:'el-icon-s-claim'
           },
           {
             name:'课时总汇',
             path:'/classperiod',
             id:5,
             icon:'el-icon-time'
           },
           {
             name:'学员管理',
             path:'/xuename',
             id:6,
             icon:'el-icon-user-solid'
           },
           {
             name:'学校动态',
             icon:'el-icon-school',
            //  path:'',
             id:7,
             
             
           },
           {
             name:'其他设置',
             icon:'el-icon-setting',
            //  path:'',
             id:8,
             children:[
               {id:71,name:'教师管理',path:'components/trate/list.vue'},
               {id:72,name:'课程管理',path:'components/coures/list.vue'},
               {id:73,name:'教室管理',path:'components/classroom/list.vue'},
               {id:74,name:'账号管理',path:'components/account/list.vue'}
             ]
           },
         ]
      }

    },
    created(){
      
    },
    methods:{
      getnav(k,push){
        console.log(push)
        this.$router.push(push)
      },

      // 退出
     async deleteclear(){
        const cath =await this.$confirm('您确定要退出当前的登陆吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => {
           return error
        })
        // console.log(cath)
        if(cath=='confirm'){
             window.sessionStorage.clear()
             this.$router.push('/Login')
             this.$message.success('退出成功')
        }
      
      }
    },
  }

</script>

<style scoped>
 /* .router-link-active{
        width:80px;
        height:80px;
        color:#ff0000;
        cursor:pointer;
      } */
  .a{
    width: 80%;
    height: 11%;
    background-color: rgb(128, 211, 19);
    margin-top: 20%;
    border-radius: 10%;
  }
  
  .d{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .b{
    font-size: 25px;
  }
  .c{
    font-size: 12%;
    margin-top: 8%;
  }

  .to{
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
  }
  .title_do{
    font-size: 10px;
  }
  .el-main {
    background-color: rgb(243, 243, 243);
  }

  .header {
    width: 100%;
    background-color: #fefefe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-image: linear-gradient(top #999 blue); */
  }

  .header .header-img {
    width: 290px;
    height: 55%;
    background-color: cadetblue;
  }
  .logins{
    width: 250px;
    height: 50%;
    display: flex;
    align-items: center;

  }
  .header .header-img img {
    width: 100%;
    height: 100%;
  }

  .aside {
    background-color: #fefefe;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .aside .nav {
    width: 75%;
    height: 10%;
    margin-top: 50%;
    /* background-color: #999; */
    border-radius: 4px;
    
  }
  .aside .nav:hover {
    background-color: rgb(221, 226, 226);
  }

  .icon {
    font-size: 28px;
    color: #515f7a;
    margin-top: 4%;
  }

  .nav-text {
    width: 100%;
    /* background-color: aqua; */
    font-size: 10%;
    margin-top: 4%;
    color: #515f7a;
  }

</style>
